<template>
	<view>
		<navBar title="地址详情" backJudge></navBar>
		<view class="addressEdit" v-if="detail">
			<view class="labelBox">
				<view class="label">地区</view>
				<view class="value" @click="indexlistpopup">
					<!-- <picker @change="bindPickerChange" @columnchange="change" mode="multiSelector" :range="range"> -->
						<view class="text">{{detail.city.mergerName || '地区'}}</view>
					<!-- </picker> -->
				</view>
			</view>
			<view class="labelBox">
				<view class="label">选择小区</view>
				<view class="value" @click="popup()">
					<view class="text">{{detail.city.name || '小区'}}</view>
				</view>
			</view>
			<!-- <view class="labelBox">
				<view class="label">选择小区</view>
				<view class="value" @click="judge">
					<picker @change="AreaChange" :disabled="actId === 0" mode="selector" :range="areaRange">
						<view class="text">{{detail.city.name || '小区'}}</view>
					</picker>
				</view>
			</view> -->
			<view class="labelBox">
				<view class="label">地址详情</view>
				<view class="value">
					<input  placeholder="地址详情" v-model="detail.detail"></input>
				</view>
			</view>
			<view class="labelBox">
				<view class="label">联系人</view>
				<view class="value">
					<input  placeholder="联系人" v-model="detail.userName"></input>
				</view>
			</view>
			<view class="labelBox">
				<view class="label">联系电话</view>
				<view class="value">
					<input  placeholder="联系电话" v-model="detail.phone"></input>
				</view>
			</view>
			<view class="labelBox">
				<view class="label">是否默认</view>
				<view class="dot" @click="choose">
					<view class="act" v-if="detail.isDefault.key == 1"></view>
				</view>
			</view>
		</view>
		<view class="addressEdit" v-else>
			<view class="labelBox" @click="indexlistpopup">
				<view class="label">地区</view>
				<view class="value">
					<!-- <picker @change="bindPickerChange" @columnchange="change" mode="multiSelector" :range="range"> -->
						<view class="text">{{cityName || '选择地区'}}</view>
					<!-- </picker> -->
				</view>
			</view>
			<!-- <view class="labelBox">
				<view class="label">选择小区</view>
				<view class="value" @click="judge">
					<picker @change="AreaChange" :disabled="actId === 0" mode="selector" :range="areaRange">
						<view class="text">{{actArea || '小区'}}</view>
					</picker>
				</view>
			</view> -->
			
			<view class="labelBox">
				<view class="label">选择小区</view>
				<view class="value" @click="popup()">
					<view class="text">{{actArea || '小区'}}</view>
				</view>
			</view>
			<view class="labelBox">
				<view class="label">地址详情</view>
				<view class="value">
					<input placeholder="地址详情" v-model="form.detail"></input>
				</view>
			</view>
			<view class="labelBox">
				<view class="label">联系人</view>
				<view class="value">
					<input  placeholder="联系人" v-model="form.userName"></input>
				</view>
			</view>
			<view class="labelBox">
				<view class="label">联系电话</view>
				<view class="value">
					<input  placeholder="联系电话" v-model="form.phone"></input>
				</view>
			</view>
			<view class="labelBox">
				<view class="label">是否默认</view>
				<view class="dot" @click="form.isDefault ^= 1">
					<view class="act" v-if="form.isDefault === 1"></view>
				</view>
			</view>
		</view>
		
		<view class="buttonBox" @click="edit">{{type==='add'?'添加地址':'保存'}}</view>
		<uni-popup ref="diqu" safe-area="false">
			<view class="diqubox">
				<scroll-view style="padding: 40rpx 30rpx;box-sizing: border-box; border-radius: 20rpx 20rpx 0 0;background-color:#fff; height: 1000rpx;width: 750rpx;margin: 0 auto;" scroll-y="true" refresher-background="#fff" >
					<view style="display: flex;align-items: center;justify-content: space-between;">
						<view style="font-size: 40rpx;font-weight: bold;">选择小区</view>
						<input @input="searchinput" confirm-type="search" @confirm="search" v-model="searchxiaoqu" type="text" style="margin: 0 auto;padding-left: 20rpx; margin-left: 30rpx; width: 400rpx;border-radius: 10rpx;height: 60rpx;border: 1rpx solid #ccc; font-size: 30rpx;color: #333;" placeholder="搜索小区" placeholder-style="font-size:30rpx" />
					</view>
					
					<block v-if="searcharr.length<1">
						<view @click="choosexiaoqu(index)" v-for="(item,index) in areaRange" :key="index" style="width: 680rpx;padding-left: 30rpx; margin-top: 40rpx;font-size: 30rpx;font-weight: 600;color: #333;">
							{{item}}
						</view>
					</block>
					<block v-else>
						<view @click="choosexiaoqu2(index)" v-for="(item,index) in searcharr" :key="index" style="width: 680rpx;padding-left: 30rpx; margin-top: 40rpx;font-size: 30rpx;font-weight: 600;color: #333;">
							{{item}}
						</view>
					</block>
					
				<view style="height: 100rpx;"></view>
				</scroll-view>
			</view>
		</uni-popup>
		<uni-popup ref="indexedlist" safe-area="false">
			<view class="indexedlist">
				<uni-indexed-list :address="arrssss" @actIdfun="actIdfun" :options="shengshiquarr" :show-select="false" @click="bindClick" />

			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	import {city,communityList,address,addressAdd,addressDetail,addressEdit} from '@/utils/API.js'
	import navBar from '../../components/navbars/navbars.vue'
	var app = getApp()
	export default {
		data() {
			return {
				searchxiaoqu:'',
				searcharr:[],
				searcharrkey:[],
				areaRange:[],
				areaRangeKey:[],
				actArea:'',
				detail: null,
				id: '',
				address: {},
				range: [[],[],[]],
				actIndex: [0, 0, 0],
				actId: 0,
				actAreaId:0,
				type: '',
				form: {
					"userName": "",
					"phone": "",
					"city": {
						"id": ''
					},
					"detail": '',
					"isDefault": 1
				},
				cityName: '',
				isnoxiaoqu:true,
				
				arrssss:[],
				shengshiquarr:[]
			}
		},
		components:{
			navBar
		},
		onLoad(e) {
			this.getwhere()
			this.type = e.type
			console.log(e);
			if (!this.type) {
				this.id = e.id
				this.getData()
			}
			
			
		},
		methods: {
			async getwhere(){
				const result = await city()
				if(result.code == 200){
					console.log('11111',result);
					this.cityobj=result.data
					uni.setStorageSync('cityobj',result.data)
					
					this.arrssss =result.data.groups
					if(this.arrssss){
						this.typeshegnshiqu()
					}
				}
			},
			typeshegnshiqu(){
				var arrssss =  this.arrssss
				var arr = []
				
				for(var i =0;i<arrssss.length; i++){
					var data = []
					for(var j =0;j<arrssss[i].city.length; j++){
						data.push(arrssss[i].city[j].name)
						
					}
					arr.push({
						"letter": arrssss[i].startLetter,
						"data":data
					})
				}
				this.shengshiquarr = arr
				console.log('arr',arr);
			},
			searchinput(){
				if(this.searchxiaoqu==''){
					this.searcharr = []
				}
				
			},
			search(){
				for(var i=0;i<this.areaRange.length; i++){
					if(this.areaRange[i].indexOf(this.searchxiaoqu)!=-1){
						console.log(this.areaRange[i],i);
						this.searcharr.push(this.areaRange[i])
						this.searcharrkey.push(this.areaRangeKey[i])  
					}
				}
			},
			actIdfun(e){
				this.actId =e.id
				console.log(e);
				this.getCommunity(this.actId);
				this.cityName = e.cityName
				if(this.detail){
					this.detail.city.mergerName = e.cityName
				}
				
				this.$refs.indexedlist.close()
			},
			onchange(e) {
				const value = e.detail.value
			},
			onnodeclick(node) {
			},
			indexlistpopup(){
				this.$refs.indexedlist.open('bottom')
			},
			bindClick(e) {
				console.log('点击item，返回数据' + JSON.stringify(e))
		  },
			//地区
		  popup(){
				if(this.isnoxiaoqu){
					
					uni.showToast({
						title:'暂未开放到此城市',
						icon:'none',
						duration:1000
					})
					return
				}
				 this.$refs.diqu.open('bottom')
			},
			//
			choosexiaoqu(e){
				this.actArea = this.areaRange[e]
				this.actAreaId = this.areaRangeKey[e]
				if (this.type != 'add')
				this.detail.city.name = this.areaRange[e]
				this.$refs.diqu.close()
			},
			choosexiaoqu2(e){
				this.actArea = this.searcharr[e]
				this.actAreaId = this.searcharrkey[e]
				if (this.type != 'add')
				this.detail.city.name = this.searcharr[e]
				this.$refs.diqu.close()
			},
		  onchange(e) {
				console.log(e);
						const value = e.detail.value
		  },
		  onnodeclick(node) {},
			judge(){
				console.log(this.actId);
				if(this.actId == 0){
					uni.showToast({
						title:'请先选择一个地区',
						icon:'none'
					})
				}
			},
			choose() {
				this.detail.isDefault.key ^= 1
			},
			async getCommunity(id) {
				var data = {
					cityId: id,
					pageNum: 1,
					pageSize: 1000
				}
				
				const result = await communityList(data)
				if(result.code==200){
					if(result.rows.length==0){
						this.isnoxiaoqu = true
						this.detail.city.name = ''
						this.actArea = ''
						this.actAreaId = ''
						return
					}else{
						this.isnoxiaoqu = false
						this.detail.city.name = ''
						this.actArea = ''
					}
					this.areaRange = result.rows.map(item=>{
						return item.name
					})
					console.log(this.areaRange);
					this.areaRangeKey = result.rows.map(item=>{
						return item.cityId
					})
				}
			},
			AreaChange(e) {
				this.actArea = this.areaRange[e.detail.value]
				this.actAreaId = this.areaRangeKey[e.detail.value]
				if (this.type != 'add')
				this.detail.city.name = this.areaRange[e.detail.value]
			},
			bindPickerChange(e) {
				this.cityName =
					`${this.address[e.detail.value[0]].name},${this.address[e.detail.value[0]].children[e.detail.value[1]].name},${this.address[e.detail.value[0]].children[e.detail.value[1]].children[e.detail.value[2]].name}`
				if (this.type != 'add')
					this.detail.city.mergerName =
					`${this.address[e.detail.value[0]].name},${this.address[e.detail.value[0]].children[e.detail.value[1]].name},${this.address[e.detail.value[0]].children[e.detail.value[1]].children[e.detail.value[2]].name}`
				this.actId = this.address[e.detail.value[0]].children[e.detail.value[1]].children[e.detail.value[2]].id
				console.log('	this.actId',	this.actId);
				this.getCommunity(this.actId);
			},
			change(e) {
				console.log(e);
				this.actIndex[e.detail.column] = e.detail.value
				if (e.detail.column === 1) {
					// this.range[1] = this.address[e.detail.value].children.map(item =>item.name)
					this.range[2] = this.address[this.actIndex[0]].children[e.detail.value].children.map(item => item.name)
				} else if (e.detail.column === 0) {
					this.range[1] = this.address[e.detail.value].children.map(item => item.name)
					this.range[2] = this.address[e.detail.value].children[0].children.map(item => item.name)
				}
			},
			async getData() {
				var data = {
					id: this.id
				}
				const result =await addressDetail(data)
				if(result.code==200){
					this.detail = result.data
					this.form.phone = result.data.phone
					this.actId = this.detail.city.cityId
					this.actAreaId = result.data.city.cityId
					this.getCommunity(result.data.city.parentId);
				}
				
			},
			
			async edit() {
				if(this.actAreaId == '') {
					uni.showToast({
						title: '请选择小区！',
						icon: 'none',
						duration: 1000
					})
					return
				}
				let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				console.log(111111);
				if (!reg.test(this.form.phone)) {
					this.form.phone=''
					uni.showToast({
						title: '请输入正确的手机号码！',
						icon: 'none',
						duration: 1000
					})
					return
				}
				
				if (this.type === 'add') {
					this.form.city.id = parseInt(this.actAreaId)
					const result = await addressAdd(this.form)
					if(result.code==200){
						uni.showToast({
							title: '新增成功',
							icon: 'none'
						})
						uni.navigateBack()
					}
				} else {
					var data = {
						"id": this.id,
						"userName": this.detail.userName,
						"phone": this.detail.phone,
						"city": {
							"id": parseInt(this.actAreaId)
						},
						"detail": this.detail.detail,
						"isDefault": this.detail.isDefault.key
					}

					const result = await addressEdit(data)
					if(result.code==200){
						uni.showToast({
							title: '编辑成功',
							icon: 'none'
						})
						uni.navigateBack()
					}
				}

			}
		},
	
	}
</script>



<style lang="scss" scoped>
	page {
		background-color: $MainBackColor;
	}
	.indexedlist{
		width:750rpx;height: 1200rpx;border-radius: 20rpx 20rpx 0 0 ;background-color: #fff;
	}
	.dqbox{
		width: 750rpx;height: 1000rpx;border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;
	}
	.buttonBox {
		position: fixed;
		bottom: 0px;
		left: 0px;
		background-color: $blue;
		color: white;
		padding: 10px;
		width: calc(100vw - 60px);
		margin: 20px;
		text-align: center;
		border-radius: 20px;
	}

	.addressEdit {
		margin: 10px;
		background-color: white;
		padding: 20px;
		border-radius: 10px;

		.labelBox {
			display: flex;
			align-items: center;
			margin-bottom: 10px;

			.label {
				width: 70px;
				font-weight: bold;
				height: 35px;
				display: flex;
				align-items: center;
			}

			.value {
				flex: auto;
				display: flex;
				align-items: center;
				height: 35px;

				.text {
					margin-left: 10px;
					font-size: 14px;
				}
			}

			.dot {
				width: 10px;
				height: 10px;
				border-radius: 50%;
				border: 2px solid $blue;
				margin-left: 10px;
				padding: 2px;

				.act {
					background-color: $blue;
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
		}

	}
</style>